클론 코딩 리워즈 배경이 있는 이미지에 맞게 리워드 섹션을 구현 버튼은 기존 작성한 전역 버튼 스타일을 활용 HTML CSS (리워즈 섹션) CSS (전역 버튼)... 프론트엔드CSS클론 코딩htmlCSS 시작하기 - 오픈그래프와 트위터 카드 HTML 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정 Slack - KakaoTalk - og:type : 페이지의 유형(E.g, website, video.movie) og:site_name : 속한 사이트의 이름 og:title : 페이지의 이름(제목) og:description : 페이지의 간단한 설명 og:image : 페이지의 대표 이미지 주소(... 프론트엔드클론 코딩htmlhtml 푸터 푸터를 작성하고, JS를 활용해 카피라이트 부분의 년도를 올해로 설정한다. HTML CSS JS... JavaScript클론 코딩CSS프론트엔드htmlCSS 순차적 애니메이션 - 전역 버튼 스타일 메인 비주얼 부분을 제작하고 전역 버튼 (자세히 보기)를 클래스 지정만으로 사용할 수 있도록 미리 CSS에 코딩한다. .btn에 공통적인 속성을 작성하고 .btn--상태에 바리에이션을 작성한다. html 비주얼부 CSS 전역 버튼 CSS... 프론트엔드CSS클론 코딩htmlCSS 코코아톡 #2 브라우저를 통해 html 파일을 볼 수 있음(오른쪽 마우스 -> 열기) 새로고침하면 변경 된 파일 바로 확인 가능 h1부터 h6까지 글씨 크기 설정 가능 list tag <a href="http://"> self-closing tag(자체 닫기 태그) 파일로도 이미지 추가 가능 원하는 이미지 파일을 html 파일과 같은 폴더에 넣어준다 src="파일 이름.확장자" html 파일과 다른 폴더에... 클론 코딩웹사이트코코아톡노마드 코더htmlhtml 10. Community store community_user many to many 관계 테이블 생성 생성된 migration 파일 수정 migrate Community 모델 수정 유효성 검사 store form request 생성 Community 컨트롤러 수정 git commit... 클론 코딩Reddit라라벨Reddit 12. Community edit Community 컨트롤러 수정 edit view 생성 (create 복사 후 수정) Authorization Gate 활용 Community 컨트롤러 수정 git commit... 클론 코딩Reddit라라벨Reddit 11. Community pagination laravel pagination bulma 패키지 bulma pagination 템플릿 수정 bulma pagination 적용 Community 컨트롤러 수정 Community index view 수정 git commit... 클론 코딩Reddit라라벨Reddit 유튜브 영상 배경 - 반복 애니메이션 랜덤 수치를 활용한 플로팅 요소를 제작한다. 총 세 개이나, 하나는 위치상 다음 섹션으로 이동시켰다. HTML CSS JS... JavaScript클론 코딩CSS프론트엔드htmlCSS 헤더와 드롭다운 메뉴 - 전역 배지(GSAP) GSAP 플러그인을 이용한 전역 배지 HTML </header> 바로 윗부분에 작성 CSS JS 자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리... JavaScript클론 코딩CSS프론트엔드htmlCSS 요소 슬라이드 - 슬라이드 영역 토글 토글 버튼을 누르면 프로모션 영역이 접히거나 펼쳐지게 구현 JS로는 반응에 대한 이벤트를 받고 .hide 클래스를 넣고 빼는 기능만 작성하고, 변화 내용은 CSS에서 .hide 클래스에 작성 JS에 직접적으로 작성하는 것 보다는 해당 방식이 최적화에 더 적합 CSS JS... 프론트엔드CSS클론 코딩JavaScriptCSS 고정 이미지 배경 뷰포트에 배경 이미지를 고정하여 스크롤을 내리더라도 배경 이미지가 고정되도록 구현한다. (윗부분의 구성도 함께 구현) HTML CSS... 프론트엔드CSS클론 코딩htmlCSS
리워즈 배경이 있는 이미지에 맞게 리워드 섹션을 구현 버튼은 기존 작성한 전역 버튼 스타일을 활용 HTML CSS (리워즈 섹션) CSS (전역 버튼)... 프론트엔드CSS클론 코딩htmlCSS 시작하기 - 오픈그래프와 트위터 카드 HTML 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정 Slack - KakaoTalk - og:type : 페이지의 유형(E.g, website, video.movie) og:site_name : 속한 사이트의 이름 og:title : 페이지의 이름(제목) og:description : 페이지의 간단한 설명 og:image : 페이지의 대표 이미지 주소(... 프론트엔드클론 코딩htmlhtml 푸터 푸터를 작성하고, JS를 활용해 카피라이트 부분의 년도를 올해로 설정한다. HTML CSS JS... JavaScript클론 코딩CSS프론트엔드htmlCSS 순차적 애니메이션 - 전역 버튼 스타일 메인 비주얼 부분을 제작하고 전역 버튼 (자세히 보기)를 클래스 지정만으로 사용할 수 있도록 미리 CSS에 코딩한다. .btn에 공통적인 속성을 작성하고 .btn--상태에 바리에이션을 작성한다. html 비주얼부 CSS 전역 버튼 CSS... 프론트엔드CSS클론 코딩htmlCSS 코코아톡 #2 브라우저를 통해 html 파일을 볼 수 있음(오른쪽 마우스 -> 열기) 새로고침하면 변경 된 파일 바로 확인 가능 h1부터 h6까지 글씨 크기 설정 가능 list tag <a href="http://"> self-closing tag(자체 닫기 태그) 파일로도 이미지 추가 가능 원하는 이미지 파일을 html 파일과 같은 폴더에 넣어준다 src="파일 이름.확장자" html 파일과 다른 폴더에... 클론 코딩웹사이트코코아톡노마드 코더htmlhtml 10. Community store community_user many to many 관계 테이블 생성 생성된 migration 파일 수정 migrate Community 모델 수정 유효성 검사 store form request 생성 Community 컨트롤러 수정 git commit... 클론 코딩Reddit라라벨Reddit 12. Community edit Community 컨트롤러 수정 edit view 생성 (create 복사 후 수정) Authorization Gate 활용 Community 컨트롤러 수정 git commit... 클론 코딩Reddit라라벨Reddit 11. Community pagination laravel pagination bulma 패키지 bulma pagination 템플릿 수정 bulma pagination 적용 Community 컨트롤러 수정 Community index view 수정 git commit... 클론 코딩Reddit라라벨Reddit 유튜브 영상 배경 - 반복 애니메이션 랜덤 수치를 활용한 플로팅 요소를 제작한다. 총 세 개이나, 하나는 위치상 다음 섹션으로 이동시켰다. HTML CSS JS... JavaScript클론 코딩CSS프론트엔드htmlCSS 헤더와 드롭다운 메뉴 - 전역 배지(GSAP) GSAP 플러그인을 이용한 전역 배지 HTML </header> 바로 윗부분에 작성 CSS JS 자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리... JavaScript클론 코딩CSS프론트엔드htmlCSS 요소 슬라이드 - 슬라이드 영역 토글 토글 버튼을 누르면 프로모션 영역이 접히거나 펼쳐지게 구현 JS로는 반응에 대한 이벤트를 받고 .hide 클래스를 넣고 빼는 기능만 작성하고, 변화 내용은 CSS에서 .hide 클래스에 작성 JS에 직접적으로 작성하는 것 보다는 해당 방식이 최적화에 더 적합 CSS JS... 프론트엔드CSS클론 코딩JavaScriptCSS 고정 이미지 배경 뷰포트에 배경 이미지를 고정하여 스크롤을 내리더라도 배경 이미지가 고정되도록 구현한다. (윗부분의 구성도 함께 구현) HTML CSS... 프론트엔드CSS클론 코딩htmlCSS